<template>
	<view class="">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false" class="fixed">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="90%" bottom='50' :up="upoption">
			<view class="margin-top" v-for="(item,index) in list" :key="index" @click="clickOder(index)">
				<view class="middle basis-xll text-gray">
					{{item.created_at}}
				</view>
				<view class="inro-card flex margin-top padding-sm flex-direction">
					<view class="top basis-xll margin-top-sm  middle flex-direction">
						<view class="text-xl text-bold basis-xll middle" :class="item.take_num?'':'text-gray'">{{item.take_num || "暂无取件码"}}</view>
						<view class="basis-xll text-sm margin-top-sm text-gray middle">取件码</view>
					</view>
					<view class="basis-xll flex  padding-tb-sm margin-top-sm align-center">
						<view class="basis-lg text-cut flex align-center">
							<text class="iconfont icon-dayin-dayinji margin-right-sm"></text> 门店：
							<text class="text-cut">{{item.shopInfo.shop_name}}</text>
						</view>
						<view class="basis-sm text-right flex align-center justify-end">

							<text class="text-gray " v-if="item.order_status==0 && item.pay_status == 0">
								待支付
							</text>
							<text class="text-gray " v-if="item.order_status==0 && item.pay_status == 1">
								待商家确认
							</text>
							<text v-else-if="item.order_status == 2 " class="blue-color">取货中</text>
							<text v-else-if="item.order_status == 3 " style="color: #999999;">已取消</text>
							<text class="text-blue" v-else-if="item.order_status==4">
								打印完成
							</text>
							<text v-else-if="item.order_status == 5 ">商家拒绝</text>
							<text v-else-if="item.order_status == 6 ">退款处理中</text>

						</view>
					</view>
					<view class="basis-xll  flex padding-tb-sm align-center">
						<view class="basis-df  flex align-center">
							<text class="cuIcon-text margin-right-sm"></text> 订单编号
						</view>

						<view class="basis-df text-right flex align-center justify-end text-gray">
							<text class=" text-cut">{{item.order_sn}}</text>
							<view class="cuIcon-right middle "></view>
						</view>
					</view>

				</view>

			</view>
			<view class="foot">
				
			</view>

		</mescroll-body>
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue" //下拉刷新 上拉加载组件
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getData
	} from "@/static/cloudClassroom/api.js"
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,

		},
		data() {
			return {
				title: "订单",
				swiperHeight: 0,
				defalutLogo: this.resDomain + "/Offer/static/enter.png",
				list: [],
				upoption:{
				
					textNoMore:"~到底了~"
				}



			}
		},
		mounted() {
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 60;
			})
		},
		methods: {

			clickOder(index) {
				uni.navigateTo({
					url: "/app/CloudPrint/pages/order/orderInfo?order_id="+this.list[index].order_id
				})
			},
			update(){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调 */
			upCallback(page) {
				this.apiRequest('/buyer/pOrderList', {
					area_id: uni.getStorageSync('area_id'),
					page: page.num,
					limit: page.size,
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
					this.mescroll.endSuccess(res.data.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(res.data);
				}).then(e => {
					this.mescroll.endErr();
				}).catch(e => {
					this.mescroll.endErr();
				})
			}



		}



	}
</script>

<style scoped>
	@import "@/app/CloudPrint/static/iconfont.css";

	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		position: relative;
	}

	.iconfont,
	.cuIcon-text {
		font-size: 48rpx;
		color: #BDC6CB;
	}

	.padding-tb-sm {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.logo-box {
		width: 80rpx;
		height: 80rpx;
		border-radius: 15rpx;
		margin-right: 15rpx;
	}
</style>
<style lang="scss">
	.content-box {
		width: 750*0.92-135rpx;
	}

	.inro-card {
		.top {
			width: 100%;
			min-height: 100rpx;
		}


	}
</style>
